<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
	<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
 <%@ taglib prefix="zi" uri="http://gson.cn/jsp/jstl/mytags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%= basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>手机_手机通讯_运营</title>
<link rel="stylesheet" href="static/css/jd_sy.css?000" />
</head>

<body class="box" style="overflow:-Scroll;overflow-x:hidden">
	<!--
        	作者：YRAYA123@163.com
        	时间：2018-01-05
        	描述：top盒子
       -->
	<div class="top_bigbox">
		<div class="top_box">
			
			<ul class="top_dh">
			<c:if test="${empty users}">
				<li><a href="jsps/login.jsp">你好，请登录</a> <a class="kkk"></a></li>
				<li><a href="jsps/register.jsp">免费注册</a> <a class="gan">|</a></li>
			</c:if>
			<c:if test="${not empty users}" >
				<li><a href="index1">${users.user_name}</a> <a class="kkk"></a></li>
			</c:if>
				<li><a href="index1">我的订单</a> <a class="gan">|</a></li>
				<li><a href="index1" class="arrow">我的京东<i><s>♢</s></i>&nbsp;&nbsp;
				</a> <a class="gan">|</a></li>
				<li><a href="#">京东会员</a> <a class="gan">|</a></li>
				<li><a href="#">企业采购</a> <a class="gan">|</a></li>
				<li><a href="#" class="arrow">客户服务<i><s>♢</s></i>&nbsp;&nbsp;
				</a> <a class="gan">|</a></li>
				<li><a href="#" class="arrow">网站导航<i><s>♢</s></i>&nbsp;&nbsp;
				</a> <a class="gan">|</a></li>
				<li><a href="#">手机京东</a></li>
			</ul>
		</div>
	</div>

	<!--
        	作者：YRAYA123@163.com
        	时间：2018-01-05
        	描述：搜索框盒子
       -->
       
	<div class="jd_bigss">
		<div class="jd_ss">
			<a class="top_login" href="#"></a>
			<div class="sj_fl">
				手机
				<div class="bor_fl">
					全部分类<span class="one"><i><s>♢</s></i></span>
				</div>
			</div>
			<div class="red_ss">
				<input type="text" placeholder="手机" />
			</div>
			<button class="btn_ss">搜索</button>
			<div class="gwc_box">
				<div class="txt_gwc">
					<a href="cartlist">我的购物车</a>
				</div>
				<div class="gwc_img"></div>
				<div class="mycar" style="display:none">
					<img src="static/img/购物车.png"/>&nbsp;<span>我的购物车</span>
					<div>
						<div class="img">
							<img src="static/img/59ec3325N75dbfddc.jpg" />
						</div>
						<div class="font">
							Apple 苹果 iPhone X 全面屏手机 银色 全网通 256GB+ 一年碎屏
						</div>
						<div class="price">
							<span style="font-weight:bolder"> ￥9228.00×1</span>
							<div class="delete">删除</div>
						</div>
						<div class="last">
							共<span style="font-weight:bolder;color: #878787;">1</span>件商品 共计<span style="font-weight:bolder;color: #878787;"> ￥9228.00</span>
							<div class="gocar">去购物车</div>
						</div>
					</div>
						
					</div>
			<div class="sm_box">
				<div class="sm_img"></div>
				<div class="txt_sm">扫码享受优惠</div>
			</div>
		</div>
	</div>
	<!--
        	作者：YRAYA123@163.com
        	时间：2018-01-08
        	描述：手机分类
        -->
	<div class="bigbox_fl">
		<div class="box_fl">
			<div class="sj_bule">&nbsp;&nbsp;手机分类</div>
			<ul class="sj_hd">
				<li><a href="#">手机好店</a></li>
				<li><a href="#">手机营业厅</a></li>
				<li><a href="#">新Phone尚</a></li>
				<li><a href="#">游戏手机</a></li>
				<li><a href="#">玩3C</a></li>
				<li><a href="#">配件选购</a></li>
				<li><a href="#">以旧换新</a></li>
				<li><a href="#">手机社区</a></li>
				<li><a href="#">京东之家</a></li>
			</ul>
			<div class="gz_box">
				<div class="img_gz"></div>
				<div class="txt_gz">关注频道</div>
			</div>
		</div>
	</div>
	<!--
        	作者：YRAYA123@163.com
        	时间：2018-01-05
        	描述：轮播
        -->

	<div class="lb_bigbox">
		<div class="lb_xg">
			<div class="con_z">
				<dl class="dl" id="dl1">
					<dt class="dt">
						<a href="#">热门推荐</a>
						<div class="fl_yjt">></div>
					</dt>
					<dd class="dd">
						<ul>
							<li><a href="#">iphone</a></li>
							<li><a href="#">小米</a></li>
							<li><a href="#">vivo</a></li>
							<li><a href="#">荣耀</a></li>
							<li><a href="#">OPPO</a></li>
							<li><a href="#">华为</a></li>
						</ul>
					</dd>
				</dl>
				<!--
                	作者：YRAYA123@163.com
                	时间：2018-01-09
                	描述：热门分类	>
				全部手机 	游戏手机	 老人机 	拍照神器 	全面屏 	女性手机
                	+
                -->
				<dl class="dl" id="dl2">
					<dt class="dt">
						<a href="#">热门分类</a>
						<div class="fl_yjt">></div>
					</dt>
					<dd class="dd">
						<ul>
							<li><a href="pagelist">全部手机</a></li>
							<li><a href="#">游戏手机</a></li>
							<li><a href="#">老人机</a></li>
							<li><a href="#">拍照神器</a></li>
							<li><a href="#">全面屏</a></li>
							<li><a href="#">女性手机</a></li>
						</ul>
					</dd>
				</dl>
				<!--
                	作者：YRAYA123@163.com
                	时间：2018-01-09
                	描述：运营商	>
				营业厅 	选号码 	4G套餐 	买手机 	装宽带 	送流量
                -->
				<dl class="dl" id="dl3">
					<dt class="dt">
						<a href="#">运营商</a>
						<div class="fl_yjt">></div>
					</dt>
					<dd class="dd">
						<ul>
							<li><a href="#">营业厅</a></li>
							<li><a href="#">选号码</a></li>
							<li><a href="#">4G套餐</a></li>
							<li><a href="#">买手机</a></li>
							<li><a href="#">装宽带</a></li>
							<li><a href="#">送流量</a></li>
						</ul>
					</dd>
				</dl>
				<!--
                	作者：YRAYA123@163.com
                	时间：2018-01-09
                	描述：手机配件	>
				充电宝 	数据线	 手机壳	 手机贴膜 	手机支架 	潮玩周边
                -->
				<dl class="dl" id="dl4">
					<dt class="dt">
						<a href="#">热门推荐</a>
						<div class="fl_yjt">></div>
					</dt>
					<dd class="dd">
						<ul>
							<li><a href="#">iphone</a></li>
							<li><a href="#">小米</a></li>
							<li><a href="#">vivo</a></li>
							<li><a href="#">荣耀</a></li>
							<li><a href="#">OPPO</a></li>
							<li><a href="#">华为</a></li>
						</ul>
					</dd>
				</dl>
				<div class="fl_gg">
					<ul class="fl_imgbox">
						<li class="w_bor"><a href="#">
								<div class="fl_img">
									<img src="static/img/fl1.png">
								</div>
								<span>充值中心</span>
						</a></li>
						<li class="y_bor"><a href="#">
								<div class="fl_img">
									<img src="static/img/fl2.png">
								</div>
								<span>手机维修</span>
						</a></li>
						<li class="y_bor"><a href="#">
								<div class="fl_img">
									<img src="static/img/fl3.png">
								</div>
								<span>二手回收</span>
						</a></li>
					</ul>

					<div class="dh_lef1" id="left1">

					<div class="dd-left">
						<dl>
							<dt>小米</dt>
							<dd>  
								<ul>
									<li>红米5</li>
									<li>Plus</li>
									<li>Note3</li>
									<li>小米5X</li>
									<li>红米5A</li>
									<li>MIX2</li>
								</ul>
							</dd>
						</dl>
			
     					<dl>
							<dt>OPPO</dt>
							<dd>  
								<ul>
									<li>星幕屏</li>
									<li>R11s</li>
									<li>A83</li>
									<li>A73</li>
									<li>A79</li>
									<li>A57</li>
								</ul>
							</dd>
						</dl>			
						<dl>
							<dt>荣耀</dt>
							<dd>  
								<ul>
									<li>V10</li>
									<li>青春版</li>
									<li>荣耀8</li>
									<li> 畅玩7X</li>
									<li>Magic</li>
								</ul>
							</dd>
						</dl>
						
						<dl>
							<dt>更多品牌</dt>
							<dd>  
								<ul>
									<li>一加</li>
									<li>三星</li>
									<li>魅族</li>
									<li>锤子</li>
									<li>360手机</li>
									<li>努比亚</li>
								</ul>
							</dd>
						</dl>
					</div>
					<div class="dd-right1">
						
					</div>
					</div>

					<div class="dh_lef2" id="left2">
						<div class="dd-left">
						<dl>
							<dt>${a.leibie_name}</dt>
							<dd>  
								<ul>
								<c:forEach items="${b1}" var="b">
									<li style="font-size :12px">${b.leibie_name}</li>
									</c:forEach>
								</ul>
							</dd>
						</dl>
						
						<dl>
							<dt>${a3.leibie_name}</dt>
							<dd>  
								<ul>
								<c:forEach items="${b2}" var="b2">
									<li style="font-size :12px">${b2.leibie_name}</li>
									</c:forEach>
								</ul>
							</dd>
						</dl>	
						
						<dl>
							<dt>${a4.leibie_name}</dt>
							<dd>  
								<ul>
								<c:forEach items="${b3}" var="b3">
									<li style="font-size :12px">${b3.leibie_name}</li>
									</c:forEach>
								</ul>
							</dd>
						</dl>	
						
						<dl>
							<dt>${a5.leibie_name}</dt>
							<dd>  
								<ul>
								<c:forEach items="${b4}" var="b4">
									<li style="font-size :12px">${b4.leibie_name}</li>
									</c:forEach>
								</ul>
							</dd>
						</dl>		
					</div>
					<div class="dd-right2">	
					</div>
					</div>
					
					<div class="dh_lef3" id="left3">		
					<div class="dd-left">
						<dl>
							<dt>特色推荐</dt>
							<dd>  
								<ul>
									<li>宽带大促</li>
									<li>不限流量</li>
									<li>3元1天</li>
									<li>宽带续费</li>
									<li>1元体验</li>
									<li>联通166</li>
								</ul>
							</dd>
						</dl>		
     					<dl>
							<dt>中国移动</dt>
							<dd>  
								<ul>
									<li>旗舰店</li>
									<li>物联网</li>
									<li>咪咕</li>
									<li>合约机</li>
									<li>装宽带</li>
									<li>校园卡</li>
								</ul>
							</dd>
						</dl>								
						<dl>
							<dt>中国联通</dt>
							<dd>  
								<ul>
									<li>旗舰店</li>
									<li>选号码</li>
									<li>不限量</li>
									<li>合约机</li>
									<li>装宽带</li>
									<li>小强卡</li>
								</ul>
							</dd>
						</dl>						
						<dl>
							<dt>中国电信</dt>
							<dd>  
								<ul>
									<li>旗舰店</li>
									<li>选号码</li>
									<li>个人定制</li>
									<li>合约机</li>
									<li>装宽带</li>
									<li>磅礴卡</li>
								</ul>
							</dd>
						</dl>
					</div>
					<div class="dd-right3">	
					</div>
					</div>
					<div class="dh_lef4" id="left4">
					<div class="dd-left">
						<dl>
							<dt>热点关注</dt>
							<dd>  
								<ul>
									<li>充电宝</li>
									<li>锌合金</li>
									<li>抗蓝光</li>
									<li>磨砂款</li>
									<li>配件选购</li>
									<li>懒人福利</li>
								</ul>
							</dd>
						</dl>		
     					<dl>
							<dt>热门推荐</dt>
							<dd>  
								<ul>
									<li>苹果认证线</li>
									<li>充电手机壳</li>
									<li>充电器</li>
									<li>无线充</li>
									<li>指环扣</li>
								
								</ul>
							</dd>
						</dl>								
						<dl>
							<dt>精选品牌</dt>
							<dd>  
								<ul>
									<li>罗马仕</li>
									<li>品胜</li>
									<li>蜂翼</li>
									<li>倍思</li>
									<li>岳迩</li>
									<li>邦克仕</li>
								</ul>
							</dd>
						</dl>
						<dl>
							<dt>经典品牌</dt>
							<dd>  
								<ul>
									<li>ZMI</li>
									<li>Anker</li>
									<li>UAG</li>
									<li>图拉斯</li>
									<li>羽博</li>
									<li>第一卫</li>
								</ul>
							</dd>
						</dl>
					</div>
					<div class="dd-right4">
						
					</div>
					</div>

				</div>
			</div>

			<!--
                	作者：YRAYA123@163.com
                	时间：2018-01-10
                	描述：左侧菜单
                -->
			<script type="text/javascript" src="static/js/jquery-3.1.0.js"></script>
			<script>
				$(function() {
					$("#dl1,#left1").hover(function() {
						$('#left1').toggle();
						$('#dl2,#dl3,#dl4').css({
							borderRightColor : "red"
						});
					});

					$("#dl2,#left2").hover(function() {
						$('#left2').toggle();
					});

					$("#dl3,#left3").hover(function() {
						$('#left3').toggle();
					});

					$("#dl4,#left4").hover(function() {
						$('#left4').toggle();
					});
				});
			</script>

			<div class="lb_img">
				<ul>
					<li><a href="#"><img src="static/img/lb_1.jpg"></a></li>
					<li style="display: none;"><a href="#"><img
							src="static/img/lb_2.jpg"></a></li>
					<li style="display: none;"><a href="#"><img
							src="static/img/lb_3.jpg"></a></li>
					<li style="display: none;"><a href="#"><img
							src="static/img/lb_4.jpg"></a></li>
					<li style="display: none;"><a href="#"><img
							src="static/img/lb_5.jpg"></a></li>
					<li style="display: none;"><a href="#"><img
							src="static/img/lb_6.jpg"></a></li>
					<li style="display: none;"><a href="#"><img
							src="static/img/lb_7.jpg"></a></li>
				</ul>
				<div class="lb_jtz">
					<div class="lb_jt"><</div>
				</div>

				<div class="lb_jty">
					<div class="lb_jt">></div>
				</div>
			</div>
			<ul class="tm_lbbtm">
				<li class="li_img"><a href="#">CES新科技</a> <em class="hover"></em>
				</li>
				<li class="li_img"><a href="#">X20星耀红</a> <em class="hover"></em>
				</li>
				<li class="li_img"><a href="#">荣耀9青春版放量抢购</a> <em class="hover"></em>
				</li>
				<li class="li_img"><a href="#">游戏手机12期白条免息</a> <em
					class="hover"></em></li>
				<li class="li_img"><a href="#">特惠300元</a> <em class="hover"></em>
				</li>
				<li class="li_img"><a href="#">一加5T 10:00抢购</a> <em
					class="hover"></em></li>
				<li class="li_img"><a href="#">坚果Pro低至1099元</a> <em
					class="hover"></em></li>
			</ul>

			<script>
				$(function() {
					$(".lb_img,.tm_lbbtm").hover(function() {
						$(".lb_jty,.lb_jtz").toggle();
					});

					var img_li = $('.lb_img ul li');
					var bt_li = $(".tm_lbbtm li");
					var bt_em = $(".hover");
					bt_li.hover(function() {
						//								 var str1 = ul.attr("data");//每次默认选第一个
						//									var str = $(this).attr("data"); //表示选取当前点击的（this）li的data属性
						//									alert(str);
						var i = $(this).index();
						img_li.eq(i).fadeIn().siblings().fadeOut();

						$(this).stop(true, true).find('em').animate({
							height : '28px',
							marginTop : '-7px',
						}, 100);

						$(this).siblings().find('em').animate({
							height : '2px',
						}, 100);
					});

				});
			</script>
			<script>
				$(function() {
					var up = $(".lb_jtz");
					var down = $(".lb_jty");
					var img = $(".lb_img ul li");
					var index = 0; //自动轮播的下标
					//点击切换上一张
					$(up).click(
							function() {
								index--;
								$(img).stop().eq(index).fadeIn().siblings()
										.fadeOut();
								if (index < 0) {
									index = $(img).length;
								}
								$('.tm_lbbtm li').stop().eq(index).stop(true,
										true).find('em').animate({
									height : '28px',
									marginTop : '-7px',
								});

								$('.tm_lbbtm li').siblings().find('em')
										.animate({
											height : '2px',
										});
							});

					//点击切换下一张
					$(down).click(
							function() {
								$(img).stop().eq(index).fadeIn().siblings()
										.fadeOut();
								index++;
								if (index >= $(img).length) {
									index = 0;
								}
								$('.tm_lbbtm li').stop().eq(index).stop(true,
										true).find('em').animate({
									height : '28px',
									marginTop : '-7px',
								});

								$('.tm_lbbtm li').siblings().find('em')
										.animate({
											height : '2px',
										});
							});
				});
			</script>
		</div>
	</div>

	<!--
        	作者：YRAYA123@163.com
        	时间：2018-01-08
        	描述：js点击效果
        -->

	<div class="box_six">
		<ul class="six_ul">
			<li style="width: 402px; background: #3288E6;"><a href="#">
					<div class="txt1_six"
						style="color: #FFFFFF; position: relative; left: -130px;">
						新phone尚</div>
					<div class="txt2_div"
						style="color: #FFFFFF; position: relative; left: -100px;">
						中兴AXON M 新品预约</div>
					<div class="go">GO</div>
					<div id="" class="img">
						<img src="static/img/d1.png" width="270" height="270" alt=""
							style="position: relative; top: -95px; left: 130px;" />
					</div>
			</a></li>

			<li><a href="#">
					<div class="txt1_six">游戏手机</div>
					<div class="txt2_div">12期白条免息</div>
					<div class="go">GO</div>
					<div id="img_six">
						<img src="static/img/d2.png" />
					</div>
			</a></li>

			<li><a href="#">
					<div class="txt1_six">京东网厅</div>
					<div class="txt2_div">购物送流量</div>
					<div class="go">GO</div>
					<div id="img_six">
						<img src="static/img/d3.png" />
					</div>
			</a></li>
			<li><a href="#">
					<div class="txt1_six">正品好店</div>
					<div class="txt2_div">iPhone X现货抢购</div>
					<div class="go">GO</div>
					<div id="img_six">
						<img src="static/img/d4.png" />
					</div>
			</a></li>
			<li><a href="#">
					<div class="txt1_six">值得买</div>
					<div class="txt2_div">N6系列买就送超值游戏礼包</div>
					<div class="go">GO</div>
					<div id="img_six">
						<img src="static/img/d5.png" />
					</div>
			</a></li>
		</ul>
	</div>
	<script>
		$(function() {
			var li = $('.six_ul li');
			li.hover(function() {
				$(this).stop(true, true).animate({
					width : '402px',
				}).find('img').animate({
					width : '270px',
					height : '270px',
					left : '130px',
					top : '-95px',
				}, 500).parent().parent().find('.txt1_six')
						.css('color', '#fff').animate({
							left : '-130px',
						}).parent().parent().find('.txt2_div').css('color',
								'#fff').animate({
							left : '-100px',
						}).parent().parent().find('.go').show();

				$(this).css('background', "#3288E6");

				$(this).siblings().stop(true, true)
						.css('background', '#ffffff').animate({
							width : '202px'
						}).find('img').stop(true, true).animate({
							width : '150px',
							height : '150px',
							left : '0px',
							top : '0px',
						}).parent().parent().find('.txt1_six').stop(true, true)
						.css('color', '#333').animate({
							left : '0px',
						}).parent().parent().find('.txt2_div').stop(true, true)
						.css('color', '#666').animate({
							left : '0px',
						}).parent().parent().find('.go').stop(true, true)
						.hide();
			});
		});
	</script>
	<!--
        	作者：YRAYA123@163.com
        	时间：2018-01-08
        	描述：热门推荐，新品首发
        -->
	<div class="rm_box">
		<h3 class="mt1">热门推荐</h3>
		<h3 class="mt2">新品首发</h3>
		<div class="rm_l">
			<ul>
			<c:forEach items="${sp}" var="s">
				<li>
					<div class="img-xp"><img src="${s.picture_path}"></div>
					<a class="aa" href="xq_body?shoop_id=${s.shoop_Id}">${s.shoop_Product}</a>
					<div class="m-n">￥${s.shoop_price}</div>
				</li>
			</c:forEach>
			</ul>
		</div>
		<div class="rm_r">
			<ul>
			<c:forEach items="${xp}" var="p">
				<li>
					<div class="img-xp"><img src="${p.picture_path}"></div>
					<a class="aa" href="xq_body?shoop_id=${p.shoop_Id}">${p.shoop_Product}</a>
					<div class="m-n">￥${p.shoop_price}</div>
				</li>
			</c:forEach>
			</ul>
		</div>
	</div>
</body>
</html>
<script src="static/js/jquery-3.1.0.js"></script>
<script type="text/javascript">
	$(function(){
		$('.gwc_box').hover(function(){
			$('.mycar').toggle();
		});
		
	});
</script>